import React, {Component} from 'react';
import {Link} from 'react-router';
import {connect}from 'react-redux';
import {Input,Radio,Button,Form, message} from 'antd';
import DayPickerInput from 'react-day-picker/DayPickerInput';
import { DateUtils,LocaleUtils } from "react-day-picker";
const FormItem = Form.Item;

class DayPickerDemo extends Component {
    constructor(props){
        super(props);
        this.state={
            dataValue: null,//日期
            dataValue1: null,//止日期
        };
    }

    addDay(date,day){
        let t = new Date(date.getFullYear(),date.getMonth(),date.getDate()).getTime()+(day*24000*3600),
            theDay = new Date();
        return new Date(theDay.setTime(t));
    }
    //一年前的昨天
    beforeYear(){
        let yearstr=this.Date(1)
        return new Date(Date.parse(yearstr.replace(/-/g,"/")))
    }
    minDate(){
        let now = new Date(),
            min = this.maxDate();
        return new Date(min.getFullYear()-1,min.getMonth(),min.getDate());
    }
    maxDate(){
        let now = new Date(),
        yestoday = this.addDay(now,-1);
        return new Date(yestoday.getFullYear(),yestoday.getMonth(),yestoday.getDate());
    }
    minDisableDays(){
        var arr = new Array(),
            minDate = this.minDate();
        for(let i=minDate.getDate(); i>0; i--){
            arr.push(new Date(minDate.getFullYear(),minDate.getMonth(),i));
        }
        return arr;
    }
    maxDisableDays(){
        var arr = new Array(),
            maxDate = new Date(),
            nextMonth = new Date(maxDate.getFullYear(),maxDate.getMonth()+1,1),
            lastDayDate = this.addDay(nextMonth,-1);
        for(let i=maxDate.getDate(); i<=lastDayDate.getDate(); i++){
            arr.push(new Date(maxDate.getFullYear(),maxDate.getMonth(),i));
        }
        return arr;
    }
    checkDate(date){
        if(DateUtils.isDayBefore(date,this.minDate())){
            message.error("只能查询一年内的,请重新填写");
            return false;
        }
        var now = new Date();
        if(DateUtils.isDayAfter(date,now)){
            message.error("只能查询今天以前的,请重新填写");
            return false;
        }
        return true;
    }
    changeDate(t, date) {
        if (date!=null) {
            if(DateUtils.isSameDay(date,this.state.dataValue) && '1' == t)
                return false;
            if(DateUtils.isSameDay(date,this.state.dataValue1) && '2' == t)
                return false;
            if(!this.checkDate(date)){
                date = null;
            }
        }
        if (t == '1') {
            this.setState({
                dataValue: date,
            })
        } else {
            this.setState({
                dataValue1: date,
            })
        }
    }
    DateInputChange(index,value){
        if(!value) return;
        
        let str = value.split('-');
        if(str.length === 3 && !isNaN(str[0]) && !isNaN(str[1]) && !isNaN(str[2])){
            this.changeDate(index,new Date(str[0],Number(str[1])-1,str[2]));
        }else{
            alert('err');
        }
    }
    handleSubmit(){
        const {dataValue,dataValue1} = this.state;
        if(!!dataValue && !!dataValue1){
            if(this.checkDate(dataValue) && this.checkDate(dataValue1)){
                if(DateUtils.isDayBefore(dataValue1,dataValue)){
                    message.error("开始日期必须小于结束日期");
                    return false;
                }
                message.success(`提交完成${LocaleUtils.formatDay(dataValue,'yyyy-MM-dd')}`);
            }
        }else{
            message.error("请选择起始日期");
        }
    }
    render(){
        const DayPickerInputProps = {
            //readOnly:'readonly',
        }
        const {dataValue,dataValue1} = this.state;
        const StartInputProps = {
            ...DayPickerInputProps,
            onBlur:(v) =>{
                this.DateInputChange('1',v.target.value);
            }
        }
        const EndInputProps = {
            ...DayPickerInputProps,
            onBlur:(v) =>{
                this.DateInputChange('2',v.target.value);
            }
        }
        const language = {
            locale:"it",
            months:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
            weekdaysLong:['周日','周一','周二','周三','周四','周五','周六'],
            weekdaysShort:['日','一','二','三','四','五','六'],
            disabledDays:[...this.minDisableDays(),...this.maxDisableDays()]
        }
        let StartDayPickerProps = {
            fromMonth:this.minDate(),
            toMonth:this.maxDate(),
            ...language
        }
        let EndDayPickerProps = {
            fromMonth:this.state.dataValue,
            toMonth:this.maxDate(),
            ...language
        }
        return (
            <div style={{margin:50}}>
                <Form>
                    <FormItem>
                        <DayPickerInput
                            inputProps={StartInputProps}
                            dayPickerProps={StartDayPickerProps}
                            value={dataValue}
                            onDayChange={(date,modifiers) =>{
                            }}
                            placeholder="开始日期"
                        />
                    </FormItem>
                    <FormItem>
                        <DayPickerInput
                            inputProps={EndInputProps}
                            value={dataValue1}
                            dayPickerProps={EndDayPickerProps}
                            onDayChange={(date,modifiers) =>{
                            }}
                            placeholder="结束日期"
                        />
                    </FormItem>
                    <FormItem>
                            <Button type="primary" onClick={() => this.handleSubmit()}>提交</Button>
                    </FormItem>
                </Form>
            </div>
        )
    }
}
const mapStateToProps=(state)=>{
    return {
        work:state.work,
        welcome:state.welcome,
    }
}
export default connect(mapStateToProps)(DayPickerDemo);